var ani = ani || {};
ani.ui = ani.ui || {};
ani.ui.template = ani.ui.template || {};
ani.ui.template.object = ani.ui.template.object || {};
/**
 * Construct page with frame and data
 * @param pageObj: page frame object
 * @param dataObject: data object
 * @return DOM element
 */
ani.ui.template.object.constructDom = function(pageObj, dataObject, needsLabel){
    var _this = this;
    var constructContainer = function(){
        var container = ani.ui.generateHTMLMark('div');
        if(pageObj.id){
            container.attr('id', pageObj.id);
        }
        return container;
    }
    var constructButton = function(){
        var getButtonLabelIdx = function(){
            var labelIndex = 0;
            if(dataObject[pageObj.fieldName]){
                labelIndex = (labelIndex + 2) % 4;
            }
            return labelIndex;
        }
        var getSubmitParamsObj = function(){
            var paramsObj = {};
            for(var oneKey in pageObj.pageObj.urlParams){
                paramsObj[oneKey] = dataObject[pageObj.pageObj.urlParams[oneKey]];
            }
            return paramsObj;
        }
        var onClickEvent = function(buttonDom){
            this.process = function(){
                var retData = ani.ui.callServer(
                    pageObj.pageObj.url,
                    getSubmitParamsObj(),
                    'PUT'
                );
                if(retData != false){
                    buttonDom.html(pageObj.pageObj.labels[(getButtonLabelIdx() + 2) % 4]);
                }
            }
        }
        var hideButton = function(curButton){
            if(pageObj.appearanceField){
                if(dataObject[pageObj.appearanceField] == false){
                    curButton.css('display', 'none');
                }
            }
        }
        var oneButton = ani.ui.generateHTMLMark('input');
        oneButton.attr(
            'type',
            'button'
        )
        oneButton.attr(
            'value',
            pageObj.pageObj.labels[getButtonLabelIdx()]
        );
        oneButton.attr(
            'state',
            getButtonLabelIdx()
        );
        oneButton.bind(
            'click',
            new onClickEvent(oneButton).process
        );
        hideButton(oneButton);
        return oneButton;
    }
    var constructLinkDom = function(){
        var linkDom = constructLink(pageObj.pageObj.label);
        linkDom.bind(
            'click',
            function(){
                var requestObj = {}
                if(pageObj.pageObj.urlParams){
                    for(var oneKey in pageObj.pageObj.urlParams){
                        requestObj[oneKey] = dataObject[pageObj.pageObj.urlParams[oneKey]];
                    }
                }
                ani.ui.triggerMenuElement(pageObj.pageObj.url, null, requestObj);
            }
        )
        return linkDom;
    }
    var constructListDom = function(){
        var listDom = ani.ui.generateHTMLMark('ul');
        for(var oneDataListIdx in dataObject[pageObj.fieldName]){
            listDom.append(
                constructListElement(
                    pageObj,
                    dataObject[pageObj.fieldName][oneDataListIdx]
                )
            );
        }
        //TODO
        return listDom;
    }
    var constructListElement = function(oneListElement, dataObjectsList){
        var listDom = ani.ui.generateHTMLMark('li');
        for(var oneObjIdx in oneListElement.pageObj.objects){
            listDom.append(
                ani.ui.template.object.constructDom(oneListElement.pageObj.objects[oneObjIdx], dataObjectsList, true)
            );//TODO
        }
        return listDom
    }
    var constructLabel = function(forDomId, content){
        if(needsLabel != false){
            var labelDom = ani.ui.generateHTMLMark('label');
            labelDom.attr('for', forDomId);
            labelDom.html(content);
            return labelDom;
        } else {
            return null;
        }
    }
    var generateRequestParams = function(){
        var retParamsObj = {};
        for(var oneKey in pageObj.pageObj.urlParams){
            var keyParamField = pageObj.pageObj.urlParams[oneKey];
            retParamsObj[oneKey] = dataObject[keyParamField];
        }
        return retParamsObj;
    }
    var constructFieldDom = function(label){
        var fieldDom = ani.ui.generateHTMLMark(label);
        fieldDom.attr('id', pageObj.id);
        if(pageObj.pageObj.url){
            fieldDom.append(
                constructLink(dataObject[pageObj.fieldName])
            );
            var fieldClickEvent = function(){
                this.process = function(){
                    ani.ui.triggerMenuElement(
                        pageObj.pageObj.url,
                        generateRequestParams()
                    );
                }
            }
            fieldDom.bind(
                'click',
                new fieldClickEvent().process
            );
        }else{
            fieldDom.html(dataObject[pageObj.fieldName]);
        }
        return fieldDom;
    }
    var constructLink = function(content){
        var linkDOM = ani.ui.generateHTMLMark('a');
        linkDOM.attr('href', "#");
        if(typeof(content) == 'string'){
            linkDOM.html(content);
        }else{
            linkDOM.append(content);
        }
        return linkDOM;
    }

    var objTypes = {
        button: function(){
            var buttonContainer = constructContainer();
            buttonContainer.append(
                constructButton()
            );
            return buttonContainer;
        },
        link: function(){
            var linkContainer = constructContainer();
            linkContainer.append(
                constructLinkDom()
            );
            return linkContainer;
        },
        list: function(){
            var listContainer = constructContainer();
            listContainer.append(constructLabel(pageObj.id, pageObj.pageObj.label));
            listContainer.append(constructListDom());
            //TODO
            return listContainer;
        },
        field: function(){
            var fieldContainer = constructContainer();
            fieldContainer.append(constructLabel(pageObj.id, pageObj.pageObj.label));
            fieldContainer.append(constructFieldDom('div'));
            return fieldContainer;
        },
        article: function(){
            var articleContainer = constructContainer();
            articleContainer.append(constructLabel(pageObj.id, pageObj.pageObj.label));
            articleContainer.append(constructFieldDom('article'));
            return articleContainer;
        }
    }
    var constructSpecificPageObj = function(){
        if(pageObj.objType){
            return objTypes[pageObj.objType]();
        }
    }

    return constructSpecificPageObj();
}
ani.ui.template.object.constructDOMContainer = function(detailPage){
    var pageContainer = ani.ui.generateHTMLMark('section');
    pageContainer.attr('id', detailPage.pageType);
    return pageContainer;
}